<nz-drawer [nzClosable]="false" [nzVisible]="visible" nzPlacement="right" nzWidth="80%" nzTitle="角色"
           [nzFooter]="footerTpl"
           (nzOnClose)="close()">

  <nz-tabset>
    <nz-tab nzTitle="基本信息">
      <form nz-row nz-form nzLayout="vertical" [formGroup]="validateForm" (ngSubmit)="submitForm()">

        <nz-form-item nz-col nzSpan="12">
          <nz-form-control [nzSm]="24" [nzXs]="24" nzErrorTip="Please input your roleCode!">
            <label for="roleCode">角色编号</label><input nzSize="small" nz-input id="roleCode" formControlName="roleCode"
                                                     [readOnly]="isUpdate" />
          </nz-form-control>
        </nz-form-item>

        <nz-form-item nz-col nzSpan="12">
          <nz-form-control [nzSm]="24" [nzXs]="24" nzErrorTip="Please input your roleName!">
            <label for="roleName">角色名称</label><input nzSize="small" nz-input id="roleName" formControlName="roleName" />
          </nz-form-control>
        </nz-form-item>

        <nz-form-item nz-col nzSpan="24">
          <nz-form-control [nzSm]="24" [nzXs]="24">
            <label for="status">状态</label>

            <nz-select nzSize="small" nzShowSearch nzAllowClear nzPlaceHolder="Select a status" formControlName="status"
                       id="status">
              <nz-option nzLabel="启用" [nzValue]=1></nz-option>
              <nz-option nzLabel="禁用" [nzValue]=0></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item nz-col nzSpan="24">
          <nz-form-control
            [nzValidateStatus]="validateForm.controls['memo']"
            nzErrorTip="Please input your phone url!"
          >
            <label for="memo">备注</label>
            <textarea nzSize="small" formControlName="memo" id="memo" nz-input rows="2"
                      placeholder="write any thing"></textarea>
          </nz-form-control>
        </nz-form-item>
      </form>
    </nz-tab>
    <nz-tab nzTitle="菜单权限">

      <nz-card>
        <nz-tree #nzTree
                 [nzData]="menus"
                 [nzCheckedKeys]="defaultSelectedKeys"
                 [nzExpandAll]="true"
                 nzCheckable
        >
        </nz-tree>
      </nz-card>

    </nz-tab>

    <nz-tab nzTitle="接口权限">
      <nz-transfer #nzTransferComponent
        [nzDataSource]="apiData"
        [nzDisabled]="false"
        [nzShowSearch]="false"
        [nzShowSelectAll]="false"
        [nzRenderList]="[renderList, renderList]"
        (nzSelectChange)="select($event)"
        (nzChange)="change($event)"
      >
        <ng-template
          #renderList
          let-items
          let-direction="direction"
          let-stat="stat"
          let-disabled="disabled"
          let-onItemSelectAll="onItemSelectAll"
          let-onItemSelect="onItemSelect"
        >
          <nz-table #t [nzData]="items" nzSize="small" nzPageSize="15">
            <thead>
            <tr>
              <th
                [nzDisabled]="disabled"
                [nzChecked]="stat.checkAll"
                [nzIndeterminate]="stat.checkHalf"
                (nzCheckedChange)="onItemSelectAll($event)"
              ></th>
              <th>类</th>
              <th>请求方式</th>
              <th>地址</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of t.data" (click)="onItemSelect(data)">
              <td [nzChecked]="data.checked == true" (nzCheckedChange)="onItemSelect(data)"></td>
              <td>{{ data.sysAccessClass?.shortClassName }}</td>
              <td>
                <nz-tag>{{ data.requestMethod }}</nz-tag>
              </td>
              <td>{{ data.url }}</td>
            </tr>
            </tbody>
          </nz-table>
        </ng-template>
      </nz-transfer>

    </nz-tab>
  </nz-tabset>


  <ng-template #footerTpl>
    <div style="float: right">
      <button nz-button style="margin-right: 8px;" (click)="close()">取消</button>
      <button nz-button nzType="primary" (click)="submitForm()">保存</button>
    </div>
  </ng-template>

</nz-drawer>
